<template>
    <div class="feature-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧数据区 -->
            <div class="left-section">
                <!-- 城市风貌评分 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏙️</span>
                        城市风貌评分
                    </div>
                    <div class="score-radar" ref="scoreRadarChart"></div>
                </div>
                
                <!-- 历史文化遗产 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏛️</span>
                        历史文化遗产
                    </div>
                    <div class="heritage-list">
                        <div class="heritage-item" v-for="(item, index) in heritageList" :key="index">
                            <div class="heritage-icon">{{ item.icon }}</div>
                            <div class="heritage-info">
                                <div class="heritage-name">{{ item.name }}</div>
                                <div class="heritage-desc">{{ item.desc }}</div>
                                <div class="heritage-year">{{ item.year }}</div>
                            </div>
                            <div class="heritage-level" :class="item.level">{{ item.levelText }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间展示区 -->
            <div class="center-section">
                <!-- 广州风貌轮播 -->
                <div class="cityscape-carousel">
                    <el-carousel height="400px" :interval="5000" arrow="always" indicator-position="outside">
                        <el-carousel-item v-for="(item, index) in cityscapeList" :key="index">
                            <div class="carousel-content">
                                <div class="carousel-image-wrapper">
                                    <el-image :src="item.image" fit="cover" class="carousel-image"></el-image>
                                </div>
                                <div class="carousel-info">
                                    <h3 class="carousel-title">{{ item.title }}</h3>
                                    <p class="carousel-desc">{{ item.desc }}</p>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <!-- 城市特色标签云 -->
                <div class="feature-tags">
                    <div class="tag-item" v-for="(tag, index) in featureTags" :key="index" :style="getTagStyle(tag)">
                        {{ tag.name }}
                    </div>
                </div>
            </div>

            <!-- 右侧数据区 -->
            <div class="right-section">
                <!-- 城市风貌分布 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🗺️</span>
                        风貌分布
                    </div>
                    <div class="distribution-chart" ref="distributionChart"></div>
                </div>
                
                <!-- 建筑风格统计 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏢</span>
                        建筑风格统计
                    </div>
                    <div class="building-style-chart" ref="buildingStyleChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus'

import gztImg from '@/assets/img/feature/gzt.png'
import lnjzImg from '@/assets/img/feature/lnjz.png'
import xggjImg from '@/assets/img/feature/xggj.png'
import ycbjImg from '@/assets/img/feature/ycbj.png'
import zjxcImg from '@/assets/img/feature/zjxc.png'

// 历史文化遗产列表
const heritageList = ref([
    { icon: '🏛️', name: '陈家祠', desc: '岭南古建筑群', year: '1888-1894年', level: 'national', levelText: '国家级文物' },
    { icon: '🏯', name: '镇海楼', desc: '广州古城墙遗址', year: '明朝', level: 'national', levelText: '国家级文物' },
    { icon: '⛪', name: '石室圣心大教堂', desc: '哥特式建筑', year: '1863-1888年', level: 'national', levelText: '国家级文物' },
    { icon: '🏫', name: '中山纪念堂', desc: '中国宫殿式建筑', year: '1929-1931年', level: 'national', levelText: '国家级文物' },
    { icon: '🏠', name: '沙面建筑群', desc: '欧陆风格建筑', year: '19世纪末', level: 'provincial', levelText: '省级文物' }
])

// 城市风貌轮播数据
const cityscapeList = ref([
    { 
        title: '羊城八景', 
        desc: '广州传统八景，包括"白云山云山叠翠"、"珠江夜月"等，展现岭南山水特色。', 
        image: gztImg
    },
    { 
        title: '广州塔', 
        desc: '又称小蛮腰，是广州的现代地标，高600米，展现广州现代化都市风貌。', 
        image: lnjzImg
    },
    { 
        title: '岭南建筑', 
        desc: '以骑楼、祠堂为代表，结合中西方建筑特色，适应岭南气候特点。', 
        image: xggjImg
    },
    { 
        title: '珠江新城', 
        desc: '广州现代商务区，汇聚众多摩天大楼，展现国际化大都市风范。', 
        image: ycbjImg
    },
    { 
        title: '西关古街', 
        desc: '保存完好的传统街区，骑楼林立，展现老广州的市井生活风貌。', 
        image: zjxcImg
    }
])

// 城市特色标签
const featureTags = ref([
    { name: '岭南文化', size: 24, color: '#00a1ff' },
    { name: '骑楼', size: 20, color: '#00ff88' },
    { name: '粤菜', size: 22, color: '#ff6b6b' },
    { name: '粤剧', size: 18, color: '#ffd700' },
    { name: '广绣', size: 16, color: '#9370db' },
    { name: '广彩', size: 17, color: '#00d4ff' },
    { name: '珠江', size: 23, color: '#ff9a00' },
    { name: '小蛮腰', size: 21, color: '#ff6b6b' },
    { name: '羊城', size: 19, color: '#00a1ff' },
    { name: '花城', size: 22, color: '#00ff88' },
    { name: '西关大屋', size: 18, color: '#9370db' },
    { name: '沙面', size: 16, color: '#ffd700' },
    { name: '陈家祠', size: 17, color: '#00d4ff' },
    { name: '广府文化', size: 20, color: '#ff9a00' },
    { name: '现代都市', size: 21, color: '#ff6b6b' },
    { name: '海丝之路', size: 19, color: '#00a1ff' }
])

// 图表实例
const scoreRadarChart = ref<HTMLElement | null>(null)
const distributionChart = ref<HTMLElement | null>(null)
const buildingStyleChart = ref<HTMLElement | null>(null)

const scoreRadarChartInstance = ref<echarts.ECharts | null>(null)
const distributionChartInstance = ref<echarts.ECharts | null>(null)
const buildingStyleChartInstance = ref<echarts.ECharts | null>(null)

// 标签云样式
const getTagStyle = (tag: any) => {
    return {
        fontSize: `${tag.size}px`,
        color: tag.color,
        fontWeight: 'bold'
    }
}

// 初始化图表
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    // 城市风貌评分雷达图
    if (scoreRadarChart.value) {
        const chart = echarts.init(scoreRadarChart.value)
        scoreRadarChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            radar: {
                indicator: [
                    { name: '历史文化', max: 100 },
                    { name: '建筑特色', max: 100 },
                    { name: '城市景观', max: 100 },
                    { name: '文化保护', max: 100 },
                    { name: '现代风貌', max: 100 }
                ],
                center: ['50%', '50%'],
                radius: '70%',
                axisName: {
                    color: '#fff',
                    fontSize: 12
                },
                splitArea: {
                    areaStyle: {
                        color: ['rgba(255, 255, 255, 0.05)', 'rgba(255, 255, 255, 0.1)']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '城市风貌评分',
                    type: 'radar',
                    data: [
                        {
                            value: [92, 88, 94, 85, 96],
                            name: '广州市',
                            areaStyle: {
                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                    { offset: 0, color: 'rgba(0, 212, 255, 0.5)' },
                                    { offset: 1, color: 'rgba(0, 161, 255, 0.1)' }
                                ])
                            },
                            lineStyle: {
                                width: 2,
                                color: '#00d4ff'
                            },
                            symbolSize: 6
                        }
                    ]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 风貌分布图
    if (distributionChart.value) {
        const chart = echarts.init(distributionChart.value)
        distributionChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                data: ['历史文化区', '现代商务区', '传统街区', '创意园区', '滨水景观区'],
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '风貌分布',
                    type: 'pie',
                    radius: ['45%', '70%'],
                    center: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: 'rgba(255, 255, 255, 0.2)',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 35, name: '历史文化区', itemStyle: { color: '#00a1ff' } },
                        { value: 30, name: '现代商务区', itemStyle: { color: '#00ff88' } },
                        { value: 20, name: '传统街区', itemStyle: { color: '#ff6b6b' } },
                        { value: 10, name: '创意园区', itemStyle: { color: '#ffd700' } },
                        { value: 15, name: '滨水景观区', itemStyle: { color: '#9370db' } }
                    ]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 建筑风格统计图
    if (buildingStyleChart.value) {
        const chart = echarts.init(buildingStyleChart.value)
        buildingStyleChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: { color: '#fff' },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['岭南传统', '欧陆风格', '现代主义', '中西结合', '新古典主义'],
                axisLabel: { color: '#fff' },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            series: [
                {
                    name: '建筑数量',
                    type: 'bar',
                    data: [
                        {
                            value: 320,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#00d4ff' },
                                    { offset: 1, color: '#00a1ff' }
                                ])
                            }
                        },
                        {
                            value: 180,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#00ff88' },
                                    { offset: 1, color: '#00d47f' }
                                ])
                            }
                        },
                        {
                            value: 420,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#ff6b6b' },
                                    { offset: 1, color: '#ff3a3a' }
                                ])
                            }
                        },
                        {
                            value: 250,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#ffd700' },
                                    { offset: 1, color: '#ffaa00' }
                                ])
                            }
                        },
                        {
                            value: 190,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#9370db' },
                                    { offset: 1, color: '#7b3dd1' }
                                ])
                            }
                        }
                    ],
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff'
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.feature-container {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #2d3748 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;

    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .left-section, .right-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                flex: 1;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 20px;
                    color: #00d4ff;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;

                    .icon {
                        font-size: 24px;
                    }
                }

                .score-radar {
                    height: calc(100% - 60px);
                }

                .heritage-list {
                    overflow-y: auto;
                    max-height: calc(100% - 60px);
                    
                    &::-webkit-scrollbar {
                        width: 4px;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: rgba(255, 255, 255, 0.05);
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: rgba(0, 212, 255, 0.5);
                        border-radius: 2px;
                    }

                    .heritage-item {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        padding: 15px;
                        margin-bottom: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                            transform: translateX(5px);
                        }

                        .heritage-icon {
                            font-size: 28px;
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(0, 212, 255, 0.1);
                            border-radius: 10px;
                        }

                        .heritage-info {
                            flex: 1;

                            .heritage-name {
                                font-size: 16px;
                                font-weight: 600;
                                margin-bottom: 5px;
                            }

                            .heritage-desc {
                                font-size: 12px;
                                color: #a0a0a0;
                                margin-bottom: 5px;
                            }

                            .heritage-year {
                                font-size: 12px;
                                color: #00d4ff;
                            }
                        }

                        .heritage-level {
                            padding: 4px 8px;
                            border-radius: 4px;
                            font-size: 12px;

                            &.national {
                                color: #ffd700;
                                background: rgba(255, 215, 0, 0.1);
                            }

                            &.provincial {
                                color: #00ff88;
                                background: rgba(0, 255, 136, 0.1);
                            }
                        }
                    }
                }

                .distribution-chart,
                .building-style-chart {
                    height: calc(100% - 60px);
                }
            }
        }

        .center-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .cityscape-carousel {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                :deep(.el-carousel) {
                    .el-carousel__container {
                        border-radius: 10px;
                        overflow: hidden;
                    }

                    .el-carousel__arrow {
                        background-color: rgba(0, 212, 255, 0.7);
                        
                        &:hover {
                            background-color: rgba(0, 212, 255, 0.9);
                        }
                    }

                    .el-carousel__indicators {
                        .el-carousel__button {
                            background-color: rgba(0, 212, 255, 0.7);
                        }
                    }
                }

                .carousel-content {
                    position: relative;
                    height: 100%;

                    .carousel-image-wrapper {
                        height: 100%;
                        width: 100%;
                        
                        .carousel-image {
                            height: 100%;
                            width: 100%;
                        }
                    }

                    .carousel-info {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding: 20px;
                        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

                        .carousel-title {
                            font-size: 24px;
                            margin-bottom: 10px;
                            color: #fff;
                        }

                        .carousel-desc {
                            font-size: 14px;
                            color: rgba(255, 255, 255, 0.8);
                        }
                    }
                }
            }

            .feature-tags {
                flex: 1;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 20px;

                .tag-item {
                    padding: 8px 16px;
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 20px;
                    transition: all 0.3s ease;
                    cursor: pointer;

                    &:hover {
                        transform: translateY(-5px) scale(1.1);
                        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
</style>